<script lang="jsx" setup>
import { nextTick, ref, watch } from 'vue';
import { downloadEngineeringFile } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';

const props = defineProps({
  moduleData: {
    type: Object,
    default: () => null
  }
});

const isLocalHost = window.location.hostname === 'localhost';

const tableRef = ref(null);
const searchParams = ref({
  prodNo: null
});

watch(
  () => props.moduleData,
  () => {
    nextTick(() => {
      searchParams.value.prodNo = props.moduleData.moduleNo;
      tableRef.value.getData();
    });
  },
  {
    deep: true
  }
);

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'fileName',
    dataIndex: 'fileName',
    title: '文件名',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <span class="cursor-pointer color-blue" onClick={() => handlePreview({ record })}>
          {record.fileName}
        </span>
      );
    }
  },

  {
    key: 'fileSizeKb',
    dataIndex: 'fileSizeKb',
    title: '文件大小',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return `${record.fileSizeKb}KB`;
    }
  },
  {
    key: 'fileModifiedTime',
    dataIndex: 'fileModifiedTime',
    title: '更改时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function handleDownload(data) {
  downloadEngineeringFile({
    prodNo: data.record.prodNo,
    fileName: data.record.fileName
  });
  data.hidePopup();
}

const visible = ref(false);
const previewData = ref(null);
function handlePreview(data) {
  visible.value = true;
  previewData.value = `${isLocalHost ? 'http://192.168.166.169:9999/dev-api/' : '/dev-api/'}rcerp/erpMiFile/downMiFile?prodNo=${data.record.prodNo}&fileName=${data.record.fileName}`;
  data.hidePopup();
}
</script>

<template>
  <div class="h-full w-full">
    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      class="h-full"
      :column="column"
      :show-row-selection="false"
      row-key="id"
      :scroll="{ y: 'auto' }"
      :is-init-get-data="false"
      url="/rcerp/erpMiFile/getMiFileList"
      :auto-generate-uuid="true"
      :is-pagination="false"
      @table-row-dblclick="data => handlePreview({ record: data })"
    >
      <template #title><span class="color-#646cff">工程文件</span></template>
      <template #contextmenuPopup-orter="{ args }">
        <li class="popup-item" @click="handleDownload(args)">
          <SvgIcon local-icon="download" class="text-16px" />
          下载
        </li>
        <li class="popup-item" @click="handlePreview(args)">
          <SvgIcon local-icon="preview" class="text-16px" />
          预览
        </li>
      </template>
    </Table>
    <FileViwer v-model:visible="visible" :url="previewData" pdf-use-iframe />
  </div>
</template>

<style lang="scss" scoped></style>
